---
import Layout from '@/layouts/Layout.astro'
import { COMBATS } from '@/consts/combats'
import { combates } from '@/consts/pageTitles'
import PredictionBar from '@/components/PredictionBar.astro'
import { getBoxerById } from '@/lib/boxers'

const description =
  'Descubre todos los combates de La Velada del Año V, el evento de boxeo de Ibai Llanos con los mejores creadores de contenido.'
const canonical = 'https://www.infolavelada.com/combates'

export const prerender = true
---

<Layout title={combates} description={description} canonical={canonical}>
  <section class="min-h-screen w-full">
    <h2
      class="animate-scale-in animate-delay-300 bg-gradient-to-r from-sky-100 to-pink-300 bg-clip-text pt-24 text-center text-2xl font-bold text-transparent drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]"
    >
      LOS COMBATES
    </h2>

    <div class="flex w-full flex-col items-center text-center">
      <div
        id="combats-container"
        class="relative mx-auto mb-12 mt-10 grid w-full max-w-2xl grid-cols-2 gap-4 p-6 md:gap-8 lg:max-w-6xl"
      >
        {
          COMBATS.toReversed().map(({ id, number, fighters, title }, index) => (
            <div
              class:list={[
                'relative block',
                index === 0 ? 'col-span-2' : 'col-span-2 lg:col-span-1',
              ]}
            >
              <a href={`combates/${id}`} title={`Ir al combate ${number} de ${title}`}>
                <article
                  class:list={[
                    'combat group relative flex w-full',
                    index === 0
                      ? 'animate-scale-in h-[40vh] max-h-[700px] sm:h-[50vh] lg:h-[70vh]'
                      : 'animate-scale-in h-[40vh] max-h-[400px] sm:h-[50vh]',
                    index % 2 === 0 && index !== 0
                      ? 'animate-scale-in'
                      : index !== 0
                        ? 'animate-scale-in'
                        : '',
                    'animate-delay-200 lg',
                  ]}
                >
                  {fighters.map((fighter, fighterIndex) => {
                    const combat = COMBATS.find((c) => c.id === id)
                    const isWinner = combat?.winner === fighter

                    return (
                      <div
                        class:list={[
                          'absolute z-20 flex h-full flex-col items-center',
                          fighterIndex === 0 ? 'left-0' : 'right-0',
                        ]}
                      >
                        {isWinner && (
                          <div
                            class:list={[
                              'absolute top-4 z-30 rounded-lg bg-gradient-to-r from-yellow-400 to-yellow-600 px-3 py-1 shadow-lg',
                              'animate-scale-in animate-delay-500 animate-scale-subtle',
                            ]}
                          >
                            <span class="text-xs font-black tracking-wider text-black drop-shadow-sm">
                              VICTORIA
                            </span>
                          </div>
                        )}
                        <img
                          src={`/images/fighters/combat/${fighter}.webp`}
                          class:list={[
                            'mask-fade-bottom-quick h-full w-auto object-contain object-bottom transition-transform duration-300 group-hover:scale-110',
                            (fighter === 'perxitaa' || fighter === 'viruzz') &&
                              'max-sm:-translate-x-5 lg:-translate-x-5',
                            (fighter === 'gaspi' || fighter === 'tomas') &&
                              'max-sm:translate-x-5 lg:translate-x-5',
                            isWinner && 'contrast-110 winner-aura brightness-110',
                          ]}
                          alt={`Imagen de ${fighter}`}
                          transition:name={`combat-img:${fighter}`}
                        />
                      </div>
                    )
                  })}

                  <div class="-skew-4 absolute -bottom-20 z-30 flex h-auto w-full flex-col items-center justify-center p-8 transition-transform duration-300 group-hover:scale-90">
                    <img
                      src={`/images/fighters/combat/${fighters[0]}-vs-${fighters[1]}.webp`}
                      class:list={[
                        'transform-3d z-50 object-bottom',
                        index === 0
                          ? 'h-[400px] w-[700px] object-contain'
                          : 'h-80 object-cover lg:h-56',
                      ]}
                      alt={`${fighters[0]} contra ${fighters[1]}`}
                      transition:name={`vs:${fighters[0]}-${fighters[1]}`}
                    />
                  </div>
                </article>
              </a>
              <div class="relative mt-24 block">
                <PredictionBar
                  combatId={id}
                  overlay={true}
                  fighter1={{
                    id: getBoxerById(fighters[0])?.id || '',
                    name: getBoxerById(fighters[0])?.name || '',
                    percentage: 60,
                  }}
                  fighter2={{
                    id: getBoxerById(fighters[1])?.id || '',
                    name: getBoxerById(fighters[1])?.name || '',
                    percentage: 40,
                  }}
                  totalVotes={100}
                />
              </div>
            </div>
          ))
        }
      </div>
    </div>
  </section>
</Layout>

<script>
  import { getPredictionsForPage } from '@/lib/get-predictions-for-page'

  getPredictionsForPage()
</script>

<style>
  .combat {
    animation-timeline: view(block 100% 1%);
  }

  /* Animación scale-in sutil */
  @keyframes scale-in {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-scale-in {
    animation: scale-in 0.6s ease-out forwards;
  }

  /* Animación scale continua sutil para Victoria */
  @keyframes scale-subtle {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .animate-scale-subtle {
    animation: scale-subtle 2s ease-in-out infinite;
  }

  /* Grid responsivo para combates */
  #combats-container {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    #combats-container {
      grid-template-columns: repeat(2, 1fr);
    }

    /* El primer combate ocupa todo el ancho */
    #combats-container > a:first-child {
      grid-column: 1 / -1;
    }
  }

  /* Aura dorada para el ganador */
  .winner-aura {
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.85))
      drop-shadow(0 0 20px rgba(245, 158, 11, 0.6)) drop-shadow(0 0 40px rgba(245, 158, 11, 0.5));
    transition: filter 300ms ease;
  }
</style>
